<template>
  <div class="aiApp">
    <PageTitle :title="'AI Application'">
      <template v-slot:operate>
        <n-button @click="$router.push('/deployment/1')">+ New App</n-button>
      </template>
    </PageTitle>
    <div class="aiApp-title" v-if="d.length === 0">
      <h1>💁‍♀️ First come, first serve.</h1>
      <h2>Easy development with Ray Serve!</h2>
    </div>
    <div class="card-container" v-if="d.length !== 0">
      <n-carousel
          :space-between="30"
          :loop="false"
          slides-per-view="auto"
          centered-slides
          draggable
      >
        <n-carousel-item :style="{ width: '500px' }"  v-for="item in d" :key="item.id">
          <div class="serve-card">
            <div class="serve-card--item">
              <p>Name</p>
              <p>{{item.app_definition.name}}</p>
            </div>
            <div class="serve-card--item">
              <p>Cluster</p>
              <p @click="to(item.cluster)" class="serve-card--cluster">{{item.cluster}}</p>
            </div>
            <div class="serve-card--item">
              <p>Route Prefix</p>
              <p>{{item.app_definition.route_prefix}}</p>
            </div>
          </div>
        </n-carousel-item>
      </n-carousel>
    </div>
  </div>
</template>

<script setup>
import PageTitle from '@/components/PageTitle'
import { NButton, NCarousel, NCarouselItem } from 'naive-ui'
import fiatBE from "@/api/fiatBE";
import {onMounted, ref} from "vue";

let d = ref([])

function to(url) {
  window.open(url)
}

onMounted(() => {
  fiatBE.get('/serve/info').then(res => {
    d.value = res.data
  })
})
</script>

<style scoped>
.aiApp {
  padding: 0 var(--lrWhite);
}
.aiApp-title {
  text-align: center;
  margin-top: 20vh;
}
.aiApp h1{
  font-size: 50px;
}
.aiApp h2{
  font-size: 30px;
  letter-spacing: 1px;
  padding: 10px 0;
}
.card-container {
  margin-top: 10vh;
}
.serve-card {
  border: 1px solid black;
  border-radius: 10px;
  background-color: #fff;
  padding: 60px;
}
.serve-card:hover{
  cursor: grab;
}
.serve-card--item p:nth-child(1) {
  font-size: 30px;
  font-weight: bold;
  padding-bottom: 10px;
}
.serve-card--item p:nth-child(2) {
  font-size: 20px;
  margin-bottom: 40px;
}
.serve-card--cluster {
  text-decoration: underline;
}
.serve-card--cluster:hover {
  cursor: pointer;
}
</style>
